<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .爸爸{
        height: 200px;
        width: 200px;
        background-color: blue;
    }
    .儿子{
        height: 50px;
        width: 50px;
        background-color: green;
    }
</style>
<body>
<!--事件会冒泡和捕获-统称为流动 冒泡:当此事件被执行 会层层继续执行父级及父级以上的同名事件
                           捕获:当此事件被执行 会从最外层向里层层执行同名事件-->
<!--阻止冒泡事件和捕获事件的发生! 调用事件对象的stopPropagation()方法 可以阻止事件的流动-->
    <div class="爸爸">
        <button class="儿子"></button>
    </div>
    <script>
        document.querySelector('.爸爸').addEventListener('click',function (){
            alert('我是爸爸')
        })
        document.querySelector('.儿子').addEventListener('click',function (){
            alert('我是儿子')
        },true)
        document.addEventListener('click',function (){
            alert('我是爷爷')
        })
    </script>
</body>
</html>